<template>
	<div class="login">
		<div class="login-wrap">
			<div class="login-img">
				<img src="@/assets/images/login-form-bg.jpg" alt="login" />
			</div>
			<div class="login-form">
				<el-form ref="loginRef" :model="loginForm" :rules="loginRules">
					<div class="login-title">
						<!-- <img src="@/assets/images/login-logo.png" alt="企业级统一数据底座" /> -->
						<img src="@/assets/images/logo.png" alt="" />
						<span> 企业级统一数据底座 </span>
					</div>
					<el-form-item prop="username">
						<el-input v-model="loginForm.username" type="text" size="large" autocomplete="new-password" placeholder="账号">
							<template #prefix><svg-icon icon-class="login-user" class="el-input__icon input-icon" /></template>
						</el-input>
					</el-form-item>
					<el-form-item prop="dwp">
						<el-input
							v-model.trim="loginForm.dwp"
							type="password"
							size="large"
							autocomplete="new-password"
							placeholder="密码"
							@keyup.enter="handleLogin"
						>
							<template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
						</el-input>
					</el-form-item>
					<el-form-item prop="code" v-if="captchaEnabled">
						<div class="login-code-box">
							<el-input
								v-model.trim="loginForm.code"
								size="large"
								autocomplete="new-password"
								placeholder="验证码"
								style="width: 63%"
								@keyup.enter="handleLogin"
							>
								<template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
							</el-input>
							<div class="login-code">
								<img :src="codeUrl" @click="getCode" class="login-code-img" />
							</div>
						</div>
					</el-form-item>
					<!-- <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox> -->
					<el-form-item class="login-button">
						<el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
							<span v-if="!loading">登 录</span>
							<span v-else>登 录 中...</span>
						</el-button>
						<div style="float: right" v-if="register">
							<router-link class="link-type" :to="'/register'">立即注册</router-link>
						</div>
					</el-form-item>
					<div class="login-tip">忘记密码了？请联系管理员</div>
				</el-form>
			</div>
		</div>

		<!--  底部  -->
		<div class="el-login-footer">
			<span>Copyright © 2019 北京智盟信通科技有限公司</span>
			<span>京ICP备19020872-1号</span>
		</div>
	</div>
</template>

<script setup>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from "@/utils/jsencrypt";
import useUserStore from "@/store/modules/user";

const userStore = useUserStore();
const router = useRouter();
const { proxy } = getCurrentInstance();

const loginForm = ref({
	username: "",
	dwp: "",
	rememberMe: false,
	code: "",
	uuid: ""
});

const loginRules = {
	username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
	dwp: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
	code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};

const codeUrl = ref("");
const loading = ref(false);
// 验证码开关
const captchaEnabled = ref(true);
// 注册开关
const register = ref(false);
const redirect = ref(undefined);

function handleLogin() {
	proxy.$refs.loginRef.validate(valid => {
		if (valid) {
			loading.value = true;
			// 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
			if (loginForm.value.rememberMe) {
				Cookies.set("username", loginForm.value.username, { expires: 30 });
				Cookies.set("password", encrypt(loginForm.value.dwp), {
					expires: 30
				});
				Cookies.set("rememberMe", loginForm.value.rememberMe, { expires: 30 });
			} else {
				// 否则移除
				Cookies.remove("username");
				Cookies.remove("password");
				Cookies.remove("rememberMe");
			}
			loginForm.value.password = loginForm.value.dwp;
			// 调用action的登录方法
			userStore
				.login(loginForm.value)
				.then(() => {
					router.push({ path: redirect.value || "/" });
				})
				.catch(() => {
					loading.value = false;
					// 重新获取验证码
					if (captchaEnabled.value) {
						getCode();
					}
				});
		}
	});
}

function getCode() {
	getCodeImg().then(res => {
		captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled;
		if (captchaEnabled.value) {
			codeUrl.value = "data:image/gif;base64," + res.img;
			loginForm.value.uuid = res.uuid;
		}
	});
}

function getCookie() {
	const username = Cookies.get("username");
	const password = Cookies.get("password");
	const rememberMe = Cookies.get("rememberMe");
	loginForm.value = {
		username: username === undefined ? loginForm.value.username : username,
		password: password === undefined ? loginForm.value.dwp : decrypt(password),
		rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
	};
}

getCode();
getCookie();
</script>

<style lang="scss" scoped>
.login {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	background-image: url("../assets/images/login-background.jpg");
	background-size: cover;
	.login-wrap {
		display: flex;
		justify-content: space-between;
		width: 80%;
		height: 80vh;
		max-width: 1187px;
		max-height: 680px;
		background: #ffffff;
		box-shadow: 0px 0px 20px 1px rgba(63, 103, 236, 0.1);
		border-radius: 6px;
		overflow: hidden;
		.login-img {
			width: 57.4%;
			display: flex;
			align-items: center;
			justify-content: center;
			img {
				width: 93.6%;
			}
		}
	}
	.login-tip {
		padding-top: 28px;
		font-size: 16px;
		text-align: center;
		color: #6283ef;
	}
	@media screen and (width <= 1440px) {
		.login-tip {
			padding-bottom: 0;
		}
	}

	@media screen and (width > 1440px) {
		.login-tip {
			padding-bottom: 32px;
		}
	}
	.login-title {
		padding-bottom: 48px;
		display: flex;
		justify-content: center;
		align-items: center;
		span {
			margin-left: 10px;
			font-size: 22px;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: bolder;
			color: #050505;
			line-height: 28px;
			letter-spacing: 4px;
		}
	}
	.login-button {
		width: 100%;
		padding-top: 8px;
		button {
			height: 50px;
			font-size: 20px;
		}
	}
}

.login-form {
	background: #eef0fe;
	width: 42.6%;
	display: flex;
	align-items: center;
	.el-form {
		padding: 0 13.4% 0 15.4%;
	}
	.el-input {
		height: 50px;
		font-size: 16px;
		::v-deep(.el-input__wrapper) {
			padding: 1px 8px 1px 8px;
		}
		input {
			height: 50px;
		}
	}
	.input-icon {
		height: 49px;
		width: 24px;
		margin-left: 0px;
		margin-right: 4px;
	}
}
.login-code-box {
	width: 100%;
	display: flex;
	justify-content: space-between;
	.login-code {
		width: 33%;
		height: 50px;
		float: right;
		border-radius: 4px;
		border: 1px solid #d9d9d9;
		padding: 5px 4px;
		img {
			cursor: pointer;
			width: 100%;
			height: 40px;
		}
	}
}
.el-login-footer {
	height: 20px;
	line-height: 20px;
	position: fixed;
	bottom: 20px;
	width: 100%;
	text-align: center;
	color: #999999;
}
</style>
